<template id="todoList">
    <div class="todolist">
        <todo-form v-on:add="addItem"></todo-form>
        <todo-content v-bind:datalist='datalist'></todo-content>
        <div class="row">
            <div class="col font-weight-bolder">Total TodoList：{{datalist.length}}</div>
            <div class="col font-weight-bolder text-right">DoneList：{{Done.length}}、UnDoneList：{{UnDone.length}}</div>
        </div>
    </div>
</template>

<script>
import todoForm from './todoForm'
import todoContent from './todoContent'
import {Bus} from './Bus'

export default {
    components: {
        todoForm,
        todoContent
    },
    data(){
        return{
            datalist:[
                {
                    id: 1,
                    title: '实现个小目标，月薪过万',
                    done: true, // 是否完成
                    addtime: Date.now()
                },
                {
                    id: 2,
                    title: '实现第二个小目标，赚他一个亿',
                    done: false,
                    addtime: Date.now() + 100
                },
                {
                    id: 3,
                    title: '迎娶白富美，达到疯癫状态',
                    done: false,
                    addtime: Date.now() + 100
                }
            ]
        }
    },
    methods: {
        addItem(title){
            if(!title.trim()){
                alert('Please enter a non-empty to-do event!');
                return
            }
            const data = {
                id: this.datalist.length+1,
                title,
                done: false, 
                addtime: Date.now()
            }
            this.datalist.unshift(data)
        },
        removeItem(idx){
            var tips = confirm('Are you sure want to delete this information?')
            if(tips){
                this.datalist = this.datalist.filter(item=>item.id!==idx);
            }
        }
    },
    computed:{
        Done(){
            return this.datalist.filter(item=>item.done)
        },
        UnDone(){
            return this.datalist.filter(item=>!item.done)
        } 
    },
    mounted(){
        Bus.$on('remove',(idx)=>{
            this.removeItem(idx)
        })
    }
}
</script>

<style>

</style>